<template>
  <div>
    <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>{{ !editForm.id ? '试题录入': '试题修改'}}</span>
  </div>
  <el-form ref="addNewFormRef" :model="!editForm.id ? addNewForm : editForm"  label-width="100px" style="margin-left: 20px;" :rules="addFormRules">
    <el-form-item label="学科：" prop='subjectID'>
       <el-select v-model="addNewForm.subjectID" @change='changeSub' placeholder="请选择">
         <el-option
          v-for="item in subjects"
          :key="item.id"
          :label="item.label"
          :value="item.value">
        </el-option>
       </el-select>
    </el-form-item>
    <el-form-item label="目录：" prop='catalogID'>
       <el-select v-model="addNewForm.catalogID" placeholder="请选择">
        <el-option
          v-for="item in directorys"
          :key="item.id"
          :label="item.label"
          :value="item.value">
        </el-option>
       </el-select>
    </el-form-item>
    <el-form-item label="企业：" prop='enterpriseID'>
       <el-select v-model="addNewForm.enterpriseID" placeholder="请选择">
        <el-option
          v-for="item in companys"
          :key="item.id"
          :label="item.label"
          :value="item.value">
        </el-option>
       </el-select>
    </el-form-item>
    <el-form-item label="城市：" prop='province'>
       <el-select style="width: 197px; margin-right: 5px" v-model="addNewForm.province" @change='changePro' placeholder="请选择">
          <el-option
          v-for="item in provinces"
          :key="item.id"
          :label="item.label"
          :value="item.value">
        </el-option>
       </el-select>
       <el-select style="width: 197px;" v-model="addNewForm.city" placeholder="请选择">
        <el-option
          v-for="item in citys"
          :key="item.id"
          :label="item.label"
          :value="item.value">
        </el-option>
       </el-select>
    </el-form-item>
    <el-form-item label="方向：" prop='direction'>
       <el-select v-model="addNewForm.direction" placeholder="请选择">
        <el-option
          v-for="item in directions"
          :key="item.id"
          :label="item.label"
          :value="item.value">
        </el-option>
       </el-select>
    </el-form-item>
    <el-form-item label="题型：" prop='questionType'>
      <el-radio-group v-model="addNewForm.questionType">
        <el-radio label="1">单选</el-radio>
        <el-radio label="2">多选</el-radio>
        <el-radio label="3">简答</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="难度：" prop='difficulty'>
      <el-radio-group v-model="addNewForm.difficulty">
        <el-radio label="1">简单</el-radio>
        <el-radio label="2">一般</el-radio>
        <el-radio label="3">困难</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="题干：" style="margin-bottom: 22px; height: 238px;" prop='question'>
      <quill-editor ref="myTextEditor" v-model="addNewForm.question" :options="editorOption"  style="height:200px;"></quill-editor>
    </el-form-item>
    <div v-if='addNewForm.questionType == 1'>
    <el-form-item label="选项：">
      <el-form-item v-for='item in addNewForm.options' :key='item.label'>
      <el-radio v-model="radio" :label="item.label" @change="isRight">
      {{item.code}}：<el-input v-model='item.title'></el-input>
      </el-radio>
        <el-upload
        class="avatar-uploader"
        :action="item.img"
        :show-file-list="false"
        ><i class=" el-icon-circle-close"></i>
        <span>上传图片</span>
      </el-upload>
      </el-form-item>
    </el-form-item>
    </div>
    <div v-if='addNewForm.questionType == 2'>
      <el-form-item label='选项：' >
        <el-form-item v-for='item in addNewForm.options' :key='item.label'>
      <el-checkbox v-model="item.isRight" :label="item.label">
      {{item.code}}：<el-input v-model='item.title'></el-input>  
      </el-checkbox>
        <el-upload
        class="avatar-uploader"
        :action="item.img"
        :show-file-list="false"
        ><i class=" el-icon-circle-close"></i>
        <span>上传图片</span>
      </el-upload>
      </el-form-item>
      </el-form-item>
    </div>
    <el-form-item prop='questionType'> 
       <el-button :disabled='addNewForm.questionType == 2 ? false : true' type="danger" @click='addCheckbox' >+增加选项与答案</el-button>
    </el-form-item>
    <el-form-item label='解析视频：' prop='videoURL'>
      <el-input v-model='addNewForm.videoURL'></el-input>
    </el-form-item>
    <el-form-item label="答案解析：" style="margin-bottom: 22px; height: 238px;" prop='answer'>
  <quill-editor ref="myTextEditor" v-model="addNewForm.answer" :options="editorOption"  style="height:200px;"></quill-editor>
    </el-form-item>
    <el-form-item label="题目备注：" prop='remarks'>
      <el-input type="textarea" v-model="addNewForm.remarks" style="width: 400px;"></el-input>
    </el-form-item>
    <el-form-item label="试题标签：" prop='tags'>
      <el-select 
        v-model="addNewForm.tags"
        multiple
        placeholder="请选择"
        filterable
        allow-create
        default-first-option
        >
        <el-option
          v-for="item in tags"
          :key="item.id"
          :label="item.label"
          :value="item.label">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button :type="!editForm.id? 'primary': 'success'" @click='addBtn'>{{!editForm.id ? '确定提交' : '确定修改'}}</el-button>
    </el-form-item>
  </el-form>
</el-card>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { simple as simpleSub } from '@/api/hmmm/subjects.js'
import { simple as simpleDir } from '@/api/hmmm/directorys.js'
import { simple as simpleTag } from '@/api/hmmm/tags.js'
import { list, detail } from '@/api/hmmm/companys.js'
import { direction } from '@/api/hmmm/constants.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { add } from '@/api/hmmm/questions.js'
export default {
  name: 'questions-new',
  data () {
    return {
      addNewForm: {
        subjectID: '',
        catalogID: '',
        province: '',
        city: '',
        direction: '',
        questionType: '1',
        difficulty: '1',
        question: '',
        enterpriseID: '',
        options: [
        { 'label': 1, 'code': 'A', title: '', img: '', isRight: false }, 
        { 'label': 2, 'code': 'B', title: '', img: '', isRight: false },
        { 'label': 3, 'code': 'C', title: '', img: '', isRight: false },
        { 'label': 4, 'code': 'D', title: '', img: '', isRight: false }
        ],
        videoURL: '',
        answer: '',
        remarks: '',
        tags: ''
      },
      editForm: {
        id: 0,
        nuber: '',
        subjectID: '',
        catalogID: '',
        province: '',
        city: '',
        direction: '',
        questionType: '1',
        difficulty: '1',
        question: '',
        enterpriseID: '',
        options: [
        { 'label': 1, 'code': 'A', title: '', img: '', isRight: false }, 
        { 'label': 2, 'code': 'B', title: '', img: '', isRight: false },
        { 'label': 3, 'code': 'C', title: '', img: '', isRight: false },
        { 'label': 4, 'code': 'D', title: '', img: '', isRight: false }
        ],
        videoURL: '',
        answer: '',
        remarks: '',
        tags: ''
      },
      subjects: [],
      directorys: [],
      companys: [],
      directions: [],
      provinces: [],
      citys: [],
      tags: [],
      editorOption:{
        modules:{
          toolbar:[
            ['bold', 'italic', 'underline', 'strike'],      // toggled buttons
            [{'list': 'ordered'}, {'list': 'bullet'}],
            ['blockquote'],
            ['code-block', 'image', 'link']
          ]
        },
        placeholder: ''
      },
      array: ['A','B' ,'C' ,'D' ,'E' ,'F' ,'G' ,'H' ,'I' ,'J' ,'K' ,'L' ,'M' ,'N' ,'O' ,'P' ,'Q' ,'R' ,'S' ,'T' ,'U' ,'V' ,'W' ,'X' ,'Y' ,'Z' ],
      radio: 0,
      addFormRules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请选择学科', trigger: 'change'}
          ],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'change'}
        ],
        province: [
          { required: true, message: '请选择城市', trigger: 'change'}
        ],
        direction: [
          { required: true, message: '请选择方向', trigger: 'change'}
        ],
        questionType: [
          { required: true, message: '请选择题型', trigger: 'change'}
        ],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'change'}
        ],
        question: [
          { required: true, message: '请输入题干', trigger: 'blur'},
        ],
        answer: [
          { required: true, message: '请输入答案解析', trigger: 'blur'}
        ]
      },
      }
  },  
  components: {
    quillEditor
  },

  async created () {
     const { data: res1 } = await simpleSub()
     this.subjects = res1
     const { data: res3 } = await list({
       pagesize: 99
     })
     const res = res3.items
     this.companys = res.map(item => {
       return { label: item.company, value: item.id}
     })
     this.directions = direction.map(item=> {
     return { label: item, value: item }
     })
     this.provinces = await provinces().map(item=> {
     return { label: item, value: item }
     })    
     this.editForm.id = this.$route.query.id
    const res2 = await detail(this.editForm)
    console.log(res2.config.params)
    this.editForm = res2.config.params
  },
  methods: {
    addCheckbox () {
      const index = this.addNewForm.options.length
      const newObj = {
        'label': index + 1,
        'code': this.array[index],
        'title': '',
        'isRight': false,
        'img': ''
      }
      this.addNewForm.options.push(newObj)
    },
    isRight () {
    if (this.addNewForm.questionType == 1){
    this.addNewForm.options.forEach(item => {
      if (item.label == this.radio){
        item.isRight = true
      }else {
        item.isRight = false
      }
    })
    }else {
      this.addNewForm.options.forEach(item => {
        if (item.label == this.radio){
          item.isRight = true
      }
      })
    }
  },
  async changeSub () {
    const { data: res } = await simpleDir({subjectID: this.addNewForm.subjectID}) 
    this.directorys = res
    const { data } = await simpleTag({subjectID: this.addNewForm.subjectID})
    this.tags =  data
  },
  async changePro () {
    this.citys = await citys(this.addNewForm.province).map(item=> {
     return { label: item, value: item }
    })
  },
  async addBtn () {
    console.log(this.addNewForm)
    this.addNewForm.tags = this.addNewForm.tags.join('')
       const res = await add(this.addNewForm)
       if (res.status !== 200) return this.$message.error('新增失败')
      this.$message.success('新增成功')
      this.$refs.addNewFormRef.resetFields()
      this.$router.push('/questions/list')
  }
},
computed: {

}
}
</script>

<style scoped lang='less'>
.el-form-item {
  .el-select {
    width: 400px;
  }
  .el-radio, .el-checkbox {
    margin-top: 10px;
    float: left;
    margin-right: 5px;
    .el-input {
      width: 240px;
    }
  }
  .el-input {
    width: 400px;
  }
  .avatar-uploader {
    position: relative;
    float: left;
    width: 100px;
    height: 60px;
    border: 1px dashed #d9d9d9;
    text-align: center;
    line-height: 60px;
    i {
      position: absolute;
      top: -9px;
      right: -9px;
      font-size: 18px;
      color: #666;
    }
    span {
      display: block;
      text-align: center;
    }
  }
}

</style>
